<template>
  <div>
    <!-- <card>
      <div slot="content">
        <el-form :model="searchForm" ref="searchForm" class="search-form" inline label-suffix=" :">
          <el-form-item label="" prop="itemDetailType">
            <el-select v-model="searchForm.itemDetailType" placeholder="请选择">
              <el-option label="全部待办事项" value=""></el-option>
              <el-option label="待受理" value="0"></el-option>
              <el-option label="回退中" value="1"></el-option>
              <el-option label="待确认" value="2"></el-option>
              <el-option label="调查中" value="3"></el-option>
              <el-option label="待办结" value="4"></el-option>
              <el-option label="已中止" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="handleStatus">
            <el-select v-model="searchForm.handleStatus" placeholder="请选择">
              <el-option v-for="item in handleStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-button @click="handleSearch" type="primary" style="float: right">检索</el-button>
        </el-form>
      </div>
    </card> -->
    <el-radio-group v-model="searchForm.status" @input="handleSearch">
      <el-radio-button label="">全部</el-radio-button>
      <!-- <el-radio-button :label="key" v-for="(value, key) in statusObj" :key="key">{{ value }}</el-radio-button> -->
      <!-- v-if="roleId.indexOf(item.roles) !== -1" -->
      <el-radio-button v-for="item in statusList" :label="item.id" :key="item.id">{{ item.name }}</el-radio-button>
    </el-radio-group>
    <div v-loading="loading" style="margin: 20px 0" v-if="list.length">
      <!-- <p class="color-gray" style="margin: 20px 0">您共有待办事项 {{ total }} 项</p> -->
      <!-- <card v-for="item in list" :key="item.id" @click.native="handleShowDialog('detailsDialog', item)" :shadow="false" class="daiban">
        <div slot="content" class="daiban-item">
          <div class="daiban-type" :class="{ 'color-success': item.auditFlag === 'Y' }">{{ item.auditFlag === "Y" ? "审批" : "经办" }}</div>
          <div class="daiban-con">
            <div class="con-head">
              <el-tag v-if="countDownStatus(item.currentStepDeadline, item.status) === 2" class="time-over-tips warning" size="small" type="warning" effect="dark">临期</el-tag>
              <el-tag class="time-over-tips danger" v-else-if="countDownStatus(item.currentStepDeadline, item.status) === 1" size="small" type="danger" effect="dark">超期</el-tag>

              <el-tag v-if="item.materialCorrectStatus === 0 && !isGiveUpOver(item)" class="case-status" type="warning" size="small" effect="dark">材料补正中</el-tag>
              <el-tag v-else-if="item.auditFlag === 'Y' && item.auditStatus.length" class="case-status" size="small" type="success" effect="dark">{{ item.auditStatus }}</el-tag>
              <el-tag v-else class="case-status" size="small" effect="dark">{{ item.workOrderStatus }}</el-tag>
              <div class="name ellipsis">
                {{ item.title }}
              </div>
            </div>
            <div class="status-time">
              <span class="status">{{ item.processFlag | workOrderTodoStatus }}</span>
              <div class="over-time">
                剩余处理时限：
                <span :class="['', 'color-warning', 'color-danger'][countDownStatus(item.currentStepDeadline, item.status)]">{{ item.currentStepDeadline | timeRemainingDH }}</span>
              </div>
            </div>
          </div>
        </div>
      </card> -->
      <card v-for="item in list" :key="item.id" @click.native="handleShowDialog('detailsDialog', item)" :shadow="false" class="daiban">
        <div slot="content" class="daiban-item-second">
          <div class="con-head">
            <!-- <template v-if="searchForm.status">
              <el-tag class="case-status" :type="searchForm.status === '4' ? 'success' : ''" size="small" effect="dark">{{ statusObj[searchForm.status] }}</el-tag>
            </template> -->
            <el-tag class="case-status w74" :type="item.stageName === '审批' ? 'success' : ''" size="small" effect="dark">
              <span v-html="stageNameStyle(item.stageName)"></span>
            </el-tag>

            <el-tag v-if="item.materialCorrectStatus === 0 && !isGiveUpOver(item)" class="case-status" type="warning" size="small" effect="dark">材料补正中</el-tag>
            <el-tag v-else-if="item.auditFlag === 'Y' && item.auditStatus.length" class="case-status" size="small" type="success">{{ item.auditStatus }}</el-tag>
            <el-tag class="case-status" v-else size="small">{{ item.workOrderStatus }}</el-tag>
            <img class="deng-img" v-if="countDownStatus(item.currentStepDeadline, item.status) === 2" src="@/assets/images/icon-light-yellow.png" />
            <img class="deng-img" v-else-if="countDownStatus(item.currentStepDeadline, item.status) === 1" src="@/assets/images/icon-light-red.png" />
            <div class="name ellipsis">
              {{ item.title }}
            </div>
          </div>
          <div class="status-time">
            <span class="status">{{ item.processFlag | workOrderTodoStatus }}</span>
            <div class="over-time">
              剩余处理时限：&nbsp;&nbsp;
              <span :class="['', 'color-warning', 'color-danger'][countDownStatus(item.currentStepDeadline, item.status)]">{{ item.currentStepDeadline | timeRemainingDH }}</span>
            </div>
          </div>
        </div>
      </card>
      <pagination :total="total" :page.sync="pageQuery.pageNum" :pageSize="pageQuery.pageSize" @pageChange="fetchList" />
    </div>
    <el-empty :image-size="300" v-else></el-empty>

    <!-- 
      FIRST STEP( code:5,desc:"第一步 经办人承办"),
      FIRST LEVEL APPROVAL(code:6，desc:"一级审批")
      SECONDARY APPROVAL( code:7，，desc:"二级审批")
      SECONDARY APPROVAL( code:8,desc:"三级审批")
      THREE LEVEL APPROVAL( code:9, desc:"四级审批")
      FOUR LEVEL APPROVAL( code: 11, desc:"单位负责人")，
      WORK ORDER OPERATOR( code:12,desc:"省级主管部门")
      DEPARTMENT APPROVAL( code: 13,desc:"主管部门审批员")，
      PARENT_DEPARTMENT_APPROVAL( code:14， desc:"上级主管部门审批员"),
      TOP DEPARTMENT APPROVAL( code: 15,desc:"省级主管部门审批员");
    -->
    <detailsDialog
      ref="detailsDialog"
      :type="[6, 7, 8, 9, 11, 13, 14, 15, 10].includes(currentRow.processStatus) ? 'audit' : 'distribute'"
      :visible.sync="detailsDialog.visible"
      :id="[6, 7, 8, 9, 11, 13, 14, 15, 10].includes(currentRow.processStatus) ? currentRow.workOrderAuditId : currentRow.workOrderId"
      @replenishSuccess="fetchList"
      @replenishRevoke="fetchList"
      @dataLoaded="onWorkOrderDetailsLoaded"
    >
      <template v-slot:footer-btn="{ details }">
        <template v-if="details.materialCorrectStatus !== 0">
          <template v-if="details.workOrderAudit && [6, 7, 8, 9, 11, 13, 14, 15, 10].includes(currentRow.processStatus) && details.canAudit === 'Y'">
            <el-button @click="throughDialog.visible = true" type="primary">通过</el-button>
            <el-button @click="rebutDialog.visible = true" type="primary">驳回</el-button>
          </template>
          <template v-else-if="details.auditFlag === 'N'">
            <!-- 案件受理中的 0.待受理、1.回退中、4.待办结、15.待终止-->
            <template v-if="[0, 1].includes(details.status)">
              <!-- <el-button v-permission="['允许编辑案件']" @click="handleShowEditWorkOrderDialog(details)" type="primary"
              plain>编辑
              </el-button> -->
              <template v-if="isLeaderDepartment">
                <el-button @click="acceptAndTransferDialog.visible = true" type="primary">受理</el-button>
                <el-button @click="notAcceptDialog.visible = true" type="primary" plain>不受理</el-button>
                <!-- <el-button @click="transferDialog.visible = true" type="primary">线索移交</el-button> -->
              </template>
            </template>
            <template v-if="[4, 15].includes(details.status) && isLeaderDepartment">
              <el-button @click="finallyDialog.visible = true" type="primary">确认办结</el-button>
              <el-button @click="backDialog.visible = true" type="primary" plain>退回重办</el-button>
            </template>

            <!-- 单处理中 2.待确认、3.调查中、 subStatus：7.已中止-->
            <template v-if="details.status === 2 && isCurrentWorkWorkProcessor">
              <el-button @click="handleStart" type="primary">确认</el-button>
              <el-button v-if="details.hasRepeatCheck === 0" @click="appealDialog.visible = true" type="primary" plain>申请复核</el-button>
            </template>

            <!-- 案件查办阶段 -->
            <template v-if="details.subStatus === 7 && details.status === 3 && isCurrentWorkWorkProcessor">
              <el-button @click="handleContinueProcess" type="primary">继续办理</el-button>
            </template>
            <template v-if="details.subStatus !== 7 && details.status === 3">
              <!-- <el-button v-permission="['允许取消确认']" @click="handleCancelStart" type="primary" plain>取消确认
              </el-button> -->
              <template v-if="isCurrentWorkWorkProcessor">
                <el-button @click="onCompleteCase(details)" type="primary">提交办结</el-button>
                <el-button @click="overDialog.visible = true" type="primary" plain>提交终止</el-button>
                <el-button @click="suspendDialog.visible = true" type="primary" plain>中止</el-button>
                <!-- <el-button @click="postponeDialog.visible = true" type="primary" plain>延期</el-button> -->
                <el-button @click="onYanQi(details)" type="primary" plain>延期</el-button>
              </template>
            </template>
            <!-- <template v-if="details.status === 0 && details.auditFlag === 'N' && isLeaderDepartment">
              <el-button @click="copyToDialog.visible = true" type="primary" plain>抄送案件</el-button>
            </template> -->
          </template>
        </template>
      </template>
    </detailsDialog>

    <!-- 创建编辑弹窗-->
    <createWorkOrderDialog :visible.sync="createWorkOrderDialog.visible" :isEdit="createWorkOrderDialog.isEdit" :details="createWorkOrderDialog.details" @success="rePlayLoadData"></createWorkOrderDialog>

    <notAcceptDialog :visible.sync="notAcceptDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></notAcceptDialog>
    <transferDialog :visible.sync="transferDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></transferDialog>
    <acceptAndTransferDialog :visible.sync="acceptAndTransferDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData" :itemCode="workOrderDetails.itemDetailId"></acceptAndTransferDialog>
    <backDialog :visible.sync="backDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></backDialog>
    <cancelFinallyDialog :visible.sync="cancelFinallyDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></cancelFinallyDialog>
    <finallyDialog :visible.sync="finallyDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></finallyDialog>

    <appealDialog :visible.sync="appealDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></appealDialog>
    <suspendDialog type="process" :visible.sync="suspendDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></suspendDialog>
    <postponeDialog type="process" :visible.sync="postponeDialog.visible" :addTimeNum="currentRow.addTimeNum" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></postponeDialog>
    <completeDialog :visible.sync="completeDialog.visible" :workOrderNo="currentRow.workOrderNo" :workOrderId="currentRow.id" :hasDebtAmount="hasDebtAmount" @success="rePlayLoadData"></completeDialog>

    <!-- 驳回 -->
    <rebutDialog :visible.sync="rebutDialog.visible" @success="rePlayLoadData" :id="currentRow.workOrderAuditId" :type="currentRow.type"></rebutDialog>
    <!-- 通过 -->
    <throughDialog :visible.sync="throughDialog.visible" @success="rePlayLoadData" :id="currentRow.workOrderAuditId" :type="currentRow.type"></throughDialog>

    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL"></previewDialog>

    <copyToDialog :visible.sync="copyToDialog.visible" :workOrderNo="currentRow.workOrderNo"></copyToDialog>

    <!-- 终止 -->
    <overDialog :visible.sync="overDialog.visible" :workOrderNo="currentRow.workOrderNo" @success="rePlayLoadData"></overDialog>
  </div>
</template>

<script>
import card from "@/components/card/index.vue";
import pagination from "@/components/pagination";
import detailsDialog from "@/views/workOrder/components/detailsDialog";
import createWorkOrderDialog from "@/views/workOrder/components/createWorkOrderDialog";
import notAcceptDialog from "@/views/workOrder/components/notAcceptDialog";
import transferDialog from "@/views/workOrder/components/transferDialog";
import acceptAndTransferDialog from "@/views/workOrder/components/acceptAndTransferDialog";
import backDialog from "@/views/workOrder/components/backDialog";
import cancelFinallyDialog from "@/views/workOrder/components/cancelFinallyDialog";
import finallyDialog from "@/views/workOrder/components/finallyDialog";
import rebutDialog from "@/views/workOrder/components/rebutDialog";
import throughDialog from "@/views/workOrder/components/throughDialog";

import appealDialog from "@/views/workOrder/components/appealDialog";
import suspendDialog from "@/views/workOrder/components/suspendDialog";
import postponeDialog from "@/views/workOrder/components/postponeDialog";
import completeDialog from "@/views/workOrder/components/completeDialog";
import overDialog from "@/views/workOrder/components/overDialog";
import previewDialog from "@/views/workOrder/components/previewDialog";

import * as workOrderApi from "@/api/workOrder/index";
import * as waitingApi from "@/api/waiting";

import * as mixins from "@/utils/mixins";
import { calcWorkOrderCountDownStatus, dict2Array } from "@/utils/common";
import { workOrderTodoStatusDict } from "@/utils/dict";
import { timeRemainingDH, txt2HTML, workOrderAuditStatus, workOrderAuditType, workOrderProcessStatus, workOrderPublicStatus, workOrderTodoStatus } from "@/utils/filters";
import moment from "moment";
import * as fileApi from "@/api/file";
import { rolePermissionsMixin } from "@/views/workOrder/mixin";
import copyToDialog from "@/views/workOrder/components/copyToDialog.vue";
import { getuserinfo } from "@/api/auth";

export default {
  name: "todo",
  mixins: [mixins.affirm, rolePermissionsMixin],
  filters: {
    workOrderTodoStatus,
    timeRemainingDH,
    workOrderProcessStatus,
    workOrderAuditStatus,
    workOrderPublicStatus,
    workOrderAuditType,
  },
  components: {
    card,
    pagination,
    detailsDialog,
    createWorkOrderDialog,
    notAcceptDialog,
    transferDialog,
    acceptAndTransferDialog,
    backDialog,
    cancelFinallyDialog,
    finallyDialog,
    appealDialog,
    suspendDialog,
    postponeDialog,
    completeDialog,
    rebutDialog,
    throughDialog,
    previewDialog,
    copyToDialog,
    overDialog,
  },
  data() {
    return {
      loading: true,
      statusArr: dict2Array(workOrderTodoStatusDict, true),
      handleStatusArr: [
        { name: "全部经办状态", id: "" },
        { name: "经办中", id: "HANDING" },
        {
          name: "审批中",
          id: "APPLING",
        },
      ],
      searchForm: {
        handleStatus: "",
        itemDetailType: "",
        itemStatus: "N",
        status: "", // 状态 1受理阶段 2査办阶段 3结案阶段 4审批
      },
      pageQuery: {
        pageNum: 1,
        pageSize: 20,
      },
      currentRow: {},
      workOrderDetails: {},
      detailsDialog: {
        visible: false,
      },
      createWorkOrderDialog: {
        details: {},
        isEdit: false,
        visible: false,
      },
      overDialog: { visible: false },
      notAcceptDialog: { visible: false },
      transferDialog: { visible: false },
      acceptAndTransferDialog: { visible: false },
      backDialog: { visible: false },
      cancelFinallyDialog: { visible: false },
      finallyDialog: { visible: false },
      appealDialog: { visible: false },
      suspendDialog: { visible: false },
      postponeDialog: { visible: false },
      completeDialog: { visible: false },
      rebutDialog: { visible: false },
      throughDialog: { visible: false },
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      copyToDialog: {
        visible: false,
      },
      // {}, {}
      list: [],
      total: 0,
      hasDebtAmount: false,
      statusObj: {
        5: "预审",
        1: "受理阶段",
        2: "查办阶段",
        3: "结案阶段",
        4: "审批",
      },
      statusList: [
        { id: "5", name: "预审", roles: "3" },
        { id: "1", name: "受理阶段", roles: "3" },
        { id: "2", name: "查办阶段", roles: "2" },
        { id: "3", name: "结案阶段", roles: "3" },
        { id: "4", name: "审批", roles: "" },
      ],
      roleId: "",
    };
  },
  computed: {},
  created() {
    const { handleStatus } = this.$route.query;
    if (handleStatus) {
      this.searchForm.handleStatus = handleStatus;
    }
    this.fetchList();
    this.getuserinfo();
  },
  methods: {
    txt2HTML,
    stageNameStyle: (val) => {
      let str = val;
      if (val.length === 2) {
        str = `${val[0]}&nbsp;&nbsp;&nbsp;&nbsp;${val[1]}`;
      } else if (val.length === 3) {
        str = `${val[0]}&nbsp;&nbsp;${val[1]}&nbsp;&nbsp;${val[2]}`;
      }
      return str;
    },
    getuserinfo() {
      getuserinfo().then((res) => {
        const { code, result, msg } = res;
        if (code == 0) {
          this.roleId = result.roles || result.roleList.roles;
        }
      });
    },
    onWorkOrderDetailsLoaded(details) {
      this.workOrderDetails = details;
    },
    fetchList() {
      this.loading = true;
      waitingApi
        .list(Object.assign({}, this.searchForm, this.pageQuery))
        .then((res) => {
          const { total, records } = res.result;
          this.total = Number(total);
          this.list = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleShowDetails() {
      // TODO
    },
    handleSearch(e) {
      console.log(e);
      this.pageQuery.pageNum = 1;
      if (!e) {
        this.fetchList();
      } else {
        // 案件处理员
        if (this.roleId.indexOf("2") !== -1) {
          // e.includes(["1", "3", "4", "5"])
          // 查办阶段
          if (["2"].includes(e)) {
            this.fetchList();
          } else {
            this.list = [];
          }
        } else {
          this.fetchList();
        }
      }
    },
    rePlayLoadData() {
      this.detailsDialog.visible = false;
      this.createWorkOrderDialog.visible = false;
      this.notAcceptDialog.visible = false;
      this.transferDialog.visible = false;
      this.acceptAndTransferDialog.visible = false;
      this.backDialog.visible = false;
      this.cancelFinallyDialog.visible = false;
      this.finallyDialog.visible = false;
      this.appealDialog.visible = false;
      this.suspendDialog.visible = false;
      this.postponeDialog.visible = false;
      this.completeDialog.visible = false;
      this.fetchList();
    },
    countDownStatus(currentStepDeadline, status) {
      return calcWorkOrderCountDownStatus(moment(currentStepDeadline).diff(moment(), "milliseconds"), status);
    },
    handleShowDialog(type, row) {
      if (row.processFlag === "Y") return;
      this[type].visible = true;
      if (row) {
        this.currentRow = row;
      }
    },
    handleShowEditWorkOrderDialog(details) {
      const dialog = "createWorkOrderDialog";
      this[dialog].details = { ...details };
      this[dialog].isEdit = true;
      this.handleShowDialog(dialog, { ...details });
    },
    handleStart() {
      this.confirm("确定要开始处理该案件么？")
        .then(() => workOrderApi.process.start(this.currentRow.workOrderNo))
        .then(this.rePlayLoadData);
    },
    handleCancelStart() {
      this.confirm("确定要取消确认案件么？")
        .then(() => workOrderApi.process.cancelconfirmation(this.currentRow.workOrderNo))
        .then(this.rePlayLoadData);
    },
    handleContinueProcess() {
      this.confirm("确定要继续办理该案件么？")
        .then(() => workOrderApi.process.continueProcess(this.currentRow.workOrderNo))
        .then(this.rePlayLoadData);
    },
    onYanQi(details) {
      if (details.addTimeNum >= 3) {
        this.$alert("当前案件延期次数已超过规定的3次，不可申请延期，请在规定时间内完成办理。", "提示");
      } else {
        this.postponeDialog.visible = true;
        this.currentRow = { ...details };
      }
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
    isGiveUpOver(row) {
      return row.delFlag === "N" && row.auditFlag === "N" && row.processFlag === "N";
    },
    onCompleteCase(details) {
      this.currentRow = { ...details };
      // 拖欠账款
      this.hasDebtAmount = this.currentRow.questionMainInfo.govArrears.arrearsAmount > 0;
      this.completeDialog.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;

  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
}

.meta {
  margin-top: 10px;
  display: flex;
  //justify-content: space-between;

  .step {
    width: 280px;
  }

  .status {
    flex: 1;
  }
}
.daiban {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.daiban-item {
  display: flex;
  align-items: center;
  color: #333;
  width: 100%;
  padding: 20px;
  .daiban-type {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 100%;
    background: @color-primary;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    &.color-success {
      background: @color-success;
    }
  }
  .daiban-con {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; //重点样式
    .con-head {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      .case-status {
        background-color: @color-primary;
        border-color: @color-primary;
        &.el-tag--success {
          background: @color-success;
          border-color: @color-success;
        }
      }
      .time-over-tips {
        border-radius: 30px;
        margin-right: 10px;
        &.danger {
          background: @color-danger;
        }
        &.warning {
          background: @color-warning;
        }
      }
      .name {
        margin-left: 10px;
        font-size: 16px;
        flex: 1;
        min-width: 0; //重点样式
        white-space: nowrap; //重点样式
      }
    }
    .status-time {
      display: flex;
      font-size: 14px;
      .status {
        margin-right: 70px;
        color: @color-primary;
      }
      .over-time {
        color: #666;
      }
    }
  }
}
.daiban-item-second {
  display: flex;
  flex-direction: column;
  .con-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 20px 15px;
    width: 100%;
    .case-status {
      border-radius: 2px;
      margin-right: 10px;
      font-size: 14px;
      &.w74 {
        // display: flex;
        // justify-content: space-between;
        display: inline-block;
        text-align: center;
        width: 74px;
        overflow: hidden;
      }
      &.el-tag--dark {
        background-color: @color-primary;
        border-color: @color-primary;
        &.el-tag--success {
          background: @color-success;
          border-color: @color-success;
        }
      }
      &.el-tag--light {
        color: @color-primary;
        background: #e9effb;
        border-color: #e9effb;
        &.el-tag--success {
          color: @color-success;
          background: #edf9e8;
          border-color: #edf9e8;
        }
      }
    }
    .deng-img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .name {
      margin-left: 10px;
      font-size: 18px;
      flex: 1;
      min-width: 0; //重点样式
      white-space: nowrap; //重点样式
    }
  }
  .status-time {
    display: flex;
    font-size: 16px;
    background: #fafafa;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    .status {
      margin-right: 10px;
      width: 74px;
      text-align: center;
      color: @color-primary;
    }
    .over-time {
      color: #666;
    }
  }
}
/deep/.el-radio-button__inner {
  min-width: 110px;
  font-size: 18px;
  padding: 12px 0px;
  background-color: @color-primary;
  border-color: @color-primary;
  color: #bfc0ea;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner,
/deep/.el-radio-button:hover .el-radio-button__inner {
  background-color: #194aaa;
  border-color: #194aaa;
  color: #fff;
  box-shadow: none;
}
</style>
